<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Beckham - Free Bootstrap 4 Template by Colorlib</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/icomoon.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="page">
    <div id="colorlib-page">
      <header>
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="colorlib-navbar-brand">
                <a class="colorlib-logo" href="index.html"><span class="logo-img" style="background-image: url(images/head.jpg);"></span><h3 style="color: black">你的名字</h3></a>
              </div>
            </div>
          </div>
        </div>
      </header>

      <section class="ftco-section">
        <div class="container mt-5">
          <div class="row justify-content-center mb-5 pb-5">
            <div class="col-md-7 text-center heading-section ftco-animate">
              <h1 class="mb-3" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">Want to know more about me ?</h1>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4 d-flex align-self-stretch ftco-animate">
              <div class="media block-6 services p-3 py-4 d-block text-center">
                <div class="icon mb-3"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
                <div class="media-body">
                  <a href="aboutMe.html" target="_blank"><h3 class="heading">AboutMe</h3></a>
                </div>
              </div>
            </div>


            <div class="col-md-4 d-flex align-self-stretch ftco-animate">
              <div class="media block-6 services p-3 py-4 d-block text-center">
                <div class="icon mb-3"><span class="glyphicon glyphicon-flag"></span></div>
                <div class="media-body">
                  <a href="hometown.html" target="_blank"><h3 class="heading">Hometown</h3></a>
                </div>
              </div>      
            </div>
            <div class="col-md-4 d-flex align-self-stretch ftco-animate">
              <div class="media block-6 services p-3 py-4 d-block text-center">
                <div class="icon mb-3"><span class="glyphicon glyphicon-headphones"></span></div>
                <div class="media-body">
                  <a href="hobby.html" target="_blank"><h3 class="heading">Hobby</h3></a>
                </div>
              </div>    
            </div>
          </div>
        </div>
      </section>

    </div>


    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-migrate-3.0.1.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="js/jquery.stellar.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/aos.js"></script>
    <script src="js/scrollax.min.js"></script>
    <script src="js/main.js"></script>

  </div>
  </body>
</html>